<template>
  <div class="ztxz">
    <NavBar />
    <van-pull-refresh v-model="refreshing"
                      @refresh="onRefresh">
      <template #loading>
        <span></span>
      </template>
      <van-list v-model="loading"
                ref='publicityList'
                :finished="finished"
                :finished-text="finishedText"
                @load="onLoad">
        <div v-for="(item,index) in queryList.list"
             class="listItem"
             :key='item.id'>
             <div style="display: flex;">
                <div style="width:60px;height:40px;flex:1;margin-right:10px">
               <img :src="ImgUrl+item.coverImages[0]" >
             </div>
             <div style="flex:3">
                <div class="content"
               @click="openPage(item.url)">{{item.title}}</div>
                <div class="time">
                  <div>{{item.gtidName}}</div>
                  <div>{{formatItemDate(item.publishDate)}}</div>
                  <div>{{item.views?item.views:0}}阅读</div>
                </div>
             </div>
             </div>
            
         
          <div class="van-hairline--surround"
               v-if="index!==queryList.list.length-1"></div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import { NavBar } from "@/components";
import { getInfoList } from "@/api";
import { formatDate } from "@/utils";
import Constants from "@/api/constants";
export default {
  data () {
    return {
      showBanner: true,
      loading: false,
      finished: false,
      refreshing: false,
      finishedText: '',
      queryList: {
        "count": 0,
        "pageNo": 0,
        "rows": 10,
        list: []
      },
      ImgUrl:Constants.linkUrl
    }
  },
  components: {
    NavBar
  },
  mounted () {
  },
  computed: {
  },
  methods: {
    formatItemDate (date) {
      return formatDate(date, 'YYYY/MM/DD')
    },
    async onLoad () {
      this.loading = true;
      // this.ImgUrl = location.href
      const res = await getInfoList({
        condition: { nodeCode: 'jtzx-tyjsztk' },
        page: { pageNo: this.queryList.pageNo + 1, rows: this.queryList.rows }
      })
     console.log(res)
      const { count = 0, pageNo, rows, data = [] } = res.data || {}
      this.queryList = {
        ...this.queryList,
        count, pageNo, rows, list: this.queryList.list.concat(data)
      }
      this.loading = false;
      this.refreshing = false;
      // 数据全部加载完成
      if (data.length < 1 || pageNo * rows >= count) {
        this.finished = true;
        this.finishedText = `已加载完成所有数据，共${count}条。`
      }
    },
    onRefresh () {
      this.finished = false;
      this.finishedText = '';
      this.loading = true;
      this.queryList = {
        count: 0, pageNo: 0, rows: 10, list: []
      }
      this.onLoad()
    },
    openPage (url) {
      if (url) {
        if (process.env.NODE_ENV == 'production') {
          MXCommon.openUrlPage(`${Constants.linkUrl}${url}`)
        } else {
          window.location.href = `${Constants.linkUrl}${url}`
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
.ztxz {
  padding-top: 80px;
  overflow-x: auto;
  overflow-y: hidden;
  touch-action: manipulation;
  -moz-touch-action: manipulation;
  -ms-touch-action: manipulation;
  -o-touch-action: manipulation;
  -webkit-touch-action: manipulation;
  -webkit-overflow-scrolling: touch;
  &::-webkit-scrollbar {
    width: 0;
    display: none;
  }
  .listItem {
    padding: 32px 32px 0;
    &:first-child {
      padding-top: 22px;
    }
    .content {
      font-size: 34px;
      text-align: left;
      color: #262626;
      line-height: 52px;
      letter-spacing: 2;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      margin-bottom: 37px;
    }
    .time {
      position: relative;
      font-size: 24px;
      height: 33px;
      color: #9b9b9b;
      margin-bottom: 33px;
      line-height: 33px;
      > div {
        height: 33px;
        position: absolute;
        top: 0;
        &:nth-child(1) {
          left: 0;
        }
        &:nth-child(2) {
          right: 159px;
        }
        &:nth-child(3) {
          right: 0;
        }
      }
    }
  }
  /deep/ .van-list {
    min-height: calc(100vh - 80px);
    .van-list__error-text,
    .van-list__finished-text,
    .van-list__loading,
    .van-loading__text {
      font-size: 24px;
      line-height: 3em;
      color: #bbbbbb;
    }
  }
}
</style>
